<template>
    <el-card class="good-container">
        <template #header>
            <div class="header">
                <el-button type="primary" :icon="Plus" @click="handleAdd">新增用户</el-button>
                <el-button type="primary" :icon="Plus" @click="delMulti">批量删除</el-button>
            </div>
        </template>
        <el-table ref="tableRef" :load="state.loading" :data="state.tableData" tooltip-effect="dark" style="width: 100%">

            <el-table-column type="selection" width="50" fixed="left"></el-table-column>

            <el-table-column prop="nickname" label="昵称">
            </el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column label="用户头像" width="150px">
                <template #default="scope">
                    <img style="width: 100px; height: 100px;"  :src="scope.row.avatar"  alt="用户头像">
                </template>
            </el-table-column>
            <el-table-column prop="gender" label="性别">
            </el-table-column>
            <el-table-column prop="height" label="身高">
            </el-table-column>
            <el-table-column prop="weight" label="体重">
            </el-table-column>
            <el-table-column prop="birthday" label="生日">
            </el-table-column>
            <el-table-column prop="location" label="所在地">
            </el-table-column>
            <el-table-column prop="signature" label="个性签名">
            </el-table-column>
            <el-table-column prop="role_id" label="角色编号">
            </el-table-column>
           

            <el-table-column label="操作" width="100">
                <template #default="scope">
               <el-button @click="del(scope.row.user_id)" type="danger" size="small" circle icon="delete" ></el-button>
                </template>
            </el-table-column>

        </el-table>
        <!--总数超过一页，再展示分页器-->
        <el-pagination background layout="prev, pager, next" 
        :total="state.total" 
        :page-size="state.pageSize"
        :current-page="state.currentPage" @current-change="changePage" />
    </el-card>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance, ref } from 'vue'
import WangEditor from 'wangeditor'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { deleteMulti } from 'ali-oss/lib/common/object/deleteMulti'

const app = getCurrentInstance()

const { goTop } = app.appContext.config.globalProperties
const router = useRouter()

const tableRef = ref();

const state = reactive({
    loading: false,
    tableData: [], // 数据列表
    total: 0, // 总条数
    currentPage: 1, // 当前页
    pageSize: 10, // 分页大小
    // showEditRoleDialog: false,
    // roles: [],//所有角色数据
    // hasRoles: [],//用户已有的角色数据:default-checked-keys="state.hasRoles"默认选中
    // userid: ''
})

onMounted(() => {
    getUserList();
})
// 获取轮播图列表
const getUserList = () => {
    state.loading = true//加载的动画图标显示
    axios.get("/users/list", {
        params: {
            page: state.currentPage,
            limit: state.pageSize,
        }
    }).then(res => {
        state.tableData = res.records;
        state.total = res.total;
    })
}

const handleAdd = () => {
    router.push({ path: '/addUser' })
}

const changePage = (val) => {
    state.currentPage = val
    getUserList()
}

const del=(user_id)=>{
    axios.get("users/del?user_id="+user_id).then(
        (res)=>{
            if(res == 0){
            ElMessage({
                // showClose:true,//是否显示关闭按钮
                message:"删除成功!",
                type:"success",//消息窗口的样式类型
                duration:2000,//消息窗口2秒后自动关闭
                onClose:()=>{//消息窗口关闭后的回调函数
                    getUserList();
                }
            })
        }
        }
    )
}


const delMulti = () => {
    const selectAry = tableRef.value.getSelectionRows();
    let ids = selectAry.map( item => item.user_id);
    console.log(ids);
    axios.post("/users/delMult", ids).then(res=>{
        if(res==0){
            ElMessage({
                message:"批量删除成功!",
                type:"success",//消息窗口中的样式类型
                duration:2000,//消息窗口关闭后的回调函数
            })
            getUserList();
        }
    })
}

</script>

<style scoped>
.good-container {
    min-height: 100%;
}

.el-card.is-always-shadow {
    min-height: 100% !important;
}
</style>